﻿<template>
    <my-dialog v-model="dlgVisible" width="500px" :title="title ? title : (typeOf == 'image' ? '图片' : '文字')">
        <div style="min-height:50vh">
            <template v-for="(r, i) in items" :key="r">
                <div v-if="r.TypeOf == 1" style="text-block">
                    <AudioText type="textarea" :autosize="{ minRows: 3 }" v-model="r.Content" :disabled="disabled"
                        style="width: 98%;"></AudioText>
                    <el-link v-if="!disabled && multi" @click="remove(r, i)">移除这段文本</el-link>
                </div>
                <div v-if="r.TypeOf == 2" class="image-block">
                    <div class="image-list">
                        <image-uploader v-model="r.photo" :disabled="disabled" :ossServer="ossServer" :extData="extData" />
                    </div>
                    <el-link v-if="!disabled && multi" @click="remove(r, i)">移除这个图片区域</el-link>
                </div>
                <div v-if="r.TypeOf == 3" class="image-block">
                    <div class="image-list">
                        <image-uploader accept="video/*" v-model="r.photo" :disabled="disabled" :ossServer="ossServer" :extData="extData" />
                    </div>
                    <el-link v-if="!disabled && multi" @click="remove(r, i)">移除这个视频区域</el-link>
                </div>
            </template>

            <div v-if="needSign">
                <label>签名</label>
                <HandWriteBoard v-model="signValue" :disabled="disabled" />
            </div>
        </div>
        <div v-if="multi">
            <el-button v-if="!disabled" @click="insertTextBlock">+文本</el-button>
            <el-button v-if="!disabled" @click="insertImageBlock">+照片</el-button>
            <el-button v-if="!disabled && allowVideo" @click="insertVideoBlock">+视频</el-button>
        </div>
        <template #footer>
            <div style="display:flex">
                <el-button v-if="!disabled && !required" type="danger" @click="handleClear">清除</el-button>
                <div style="flex:1"></div>
                <el-button @click="dlgVisible = false">取消</el-button>
                <el-button v-if="!disabled" type="primary" @click="handleOk">确定</el-button>
            </div>
        </template>
    </my-dialog>
</template>

<script setup>
import { ref, watchEffect } from 'vue';
import AudioText from './AudioText.vue';

const props = defineProps({
    modelValue: String,
    disabled: Boolean,
    title: String,
    required: Boolean,
    imgProps: Object,
    needSign: Boolean,
    sign:String,
    ossServer:Boolean,
    extData:Object,
    allowVideo:Boolean,
    multi: {
        type: Boolean,
        default: true
    }
})
const emits = defineEmits(["update:modelValue"]);


const dlgVisible = ref(false);
const items = ref([]);
const signValue = ref("");

watchEffect(() => {
    signValue.value = props.sign || "";
    if (!props.modelValue) {
        items.value = [{ TypeOf: 1, Content: "" }];
        return;
    }
    let newits = JSON.parse(props.modelValue);
    items.value = newits.map(p => {
        let newitem = { ...p };
        if (newitem.ImageList) {
            newitem.photo = newitem.ImageList.join(";");
            delete newitem.ImageList;
        }
        return newitem;
    })
})

const handleOk = function () {
    if (!props.disabled) {
        let count = items.value.filter(p => (p.TypeOf == 1 && p.Content.length > 0) || (p.TypeOf == 2 && p.photo.length > 0)).length;
        if (props.required && count == 0) {
            $msg.error("内容不能为空");
            return;
        }

        if (props.needSign && !signValue.value) {
            $msg.error("请签名");
            return;
        }

        let arr = items.value.map(p => {
            let newitem = { ...p };
            if (newitem.TypeOf == 2) {
                if (newitem.photo) {
                    newitem.ImageList = newitem.photo.split(";");
                } else {
                    newitem.ImageList = [];
                }
                delete newitem.photo;
            }
            return newitem;
        });
        if(props.needSign){
            emits("update:modelValue", [JSON.stringify(arr), signValue.value]);
        }else{
            emits("update:modelValue", JSON.stringify(arr));
        }
    }
    dlgVisible.value = false;
}

const handleClear = function () {
    if (!props.disabled) {
        if(props.needSign){
            emits("update:modelValue", "","");
        }else{
            emits("update:modelValue", "");
        }
    }
    dlgVisible.value = false;
}

const open = function () {
    dlgVisible.value = true;
}

const remove = function (r, i) {
    items.value.splice(i, 1);
}

const close = function () {
    dlgVisible.value = false;
}

const insertTextBlock = function () {
    items.value.push({
        TypeOf: 1,
        Content: "",
    })
}

const insertImageBlock = function () {
    items.value.push({
        TypeOf: 2,
        photo: "",
    })
}

const insertVideoBlock= function () {
    items.value.push({
        TypeOf: 3,
        photo: "",
    })
}

defineExpose({
    open,
    close
})

</script>

<style scoped></style>